<template>
  <div>
    <el-dialog
      title="遥测-测点配置"
      :visible.sync="dialogVisible"
      :showClose="false"
      width="98%"
    >
      <div>
        <template>
          <el-table
            :data="tableData"
            :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{
              background: '#f5f5f5',
              'text-align': 'center'
            }"
            border
            style="width: 100%"
          >
            <el-table-column prop="itemTag" label="测点标识"> </el-table-column>
            <el-table-column prop="itemName" label="测点名称" width="120">
              <template #default="{ row }">
                <el-input size="mini" v-model="row.itemName"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="dataAddress" label="测点地址" width="100">
              <template #default="{ row }">
                <el-input size="mini" v-model="row.dataAddress"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="dataRate" label="倍率" width="80">
              <template #default="{ row }">
                <el-input size="mini" v-model="row.dataRate"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="转换公式" width="150">
              <template #default="{ row }">
                <el-select
                  v-model="row.convertType"
                  clearable
                  size="mini"
                  style="margin-right: 10px"
                >
                  <el-option
                    class="select"
                    v-for="(item, index) in xlalalist"
                    :key="index"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="dataPrecision" label="数据精度">
              <template #default="{ row }">
                <el-input size="mini" v-model="row.dataPrecision"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="holdAlarm" label="是否实时保存" width="120">
              <template #default="{ row }">
                <el-select
                  v-model="row.realtimeSave"
                  clearable
                  size="mini"
                  style="margin-right: 10px"
                >
                  <el-option
                    class="select"
                    label="是"
                    :value="true"
                  ></el-option>
                  <el-option
                    class="select"
                    label="否"
                    :value="false"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="holdAlarm" label="允许告警" width="100">
              <template #default="{ row }">
                <el-select
                  v-model="row.enableAlarm"
                  clearable
                  size="mini"
                  style="margin-right: 10px"
                >
                  <el-option
                    class="select"
                    label="是"
                    :value="true"
                  ></el-option>
                  <el-option
                    class="select"
                    label="否"
                    :value="false"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="upperThreshold" label="上限阈值">
              <template #default="{ row }">
                <el-input size="mini" v-model="row.upperThreshold"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" width="130" label="上限事件">
              <template #default="{ row }">
                <el-select
                  v-model="row.eventType0"
                  clearable
                  size="mini"
                  style="margin-right: 10px"
                >
                  <el-option
                    class="select"
                    v-for="(item, index) in xlalalists"
                    :key="index"
                    :label="item.text"
                    :value="+item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="lowerThreshold" label="下限阈值">
              <template #default="{ row }">
                <el-input size="mini" v-model="row.lowerThreshold"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="eventType1" label="下限事件" width="130">
              <template #default="{ row }">
                <el-select
                  v-model="row.eventType1"
                  clearable
                  size="mini"
                  style="margin-right: 10px"
                >
                  <el-option
                    class="select"
                    v-for="(item, index) in xlalalists"
                    :key="index"
                    :label="item.text"
                    :value="+item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="uppestThreshold" label="上上限阈值">
              <template #default="{ row }">
                <el-input size="mini" v-model="row.uppestThreshold"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="eventType2" label="上上限事件" width="130">
              <template #default="{ row }">
                <el-select
                  v-model="row.eventType2"
                  clearable
                  size="mini"
                  style="margin-right: 10px"
                >
                  <el-option
                    class="select"
                    v-for="(item, index) in xlalalists"
                    :key="index"
                    :label="item.text"
                    :value="+item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="lowestThreshold" label="下下限阈值">
              <template #default="{ row }">
                <el-input size="mini" v-model="row.lowestThreshold"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="eventType3" width="130" label="下下限事件">
              <template #default="{ row }">
                <el-select
                  v-model="row.eventType3"
                  clearable
                  size="mini"
                  style="margin-right: 10px"
                >
                  <el-option
                    class="select"
                    v-for="(item, index) in xlalalists"
                    :key="index"
                    :label="item.text"
                    :value="+item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="dataEnum" label="数据枚举" align="left" width="140">
              <template #default="{ row }">
                <!-- 先将 dataEnum 转为键值对数组，便于遍历 -->
                <div v-if="row.dataEnum">
                  <!-- 2.1 空枚举时：只显示新增按钮 -->
                  <div v-if="Object.keys(row.dataEnum).length === 0">
                    <i
                      class="el-icon-plus icon-plus"
                      @click="putmeiju(row)"
                    ></i>
                  </div>

                  <!-- 2.2 有枚举项时：循环渲染每个项 -->
                  <div v-else>
                    <!-- 遍历枚举键值对（entries 是 [key, value] 数组） -->
                    <div
                      v-for="(entry, index) in Object.entries(row.dataEnum)"
                      :key="index"
                    >
                      <!-- 渲染：键 + 冒号 -->
                      <span>{{ entry[0] }}:</span>
                      <!-- 渲染：值（带间距） -->
                      <span style="margin-left: 5px">{{ entry[1] }}</span>
                      <!-- 编辑按钮 -->
                      <i class="el-icon-edit icon-edit"></i>
                      <!-- 删除按钮（传入当前项的 key） -->
                      <i
                        class="el-icon-delete icon-delete"
                        @click="delmeiju(row, entry[0])"
                      ></i>

                      <!-- 新增按钮：只在「枚举项数量 < 8」且「是最后一项」时显示 -->
                      <i
                        v-if="
                          Object.keys(row.dataEnum).length < 8 &&
                          index === Object.entries(row.dataEnum).length - 1
                        "
                        class="el-icon-plus icon-plus"
                        @click="putmeiju(row)"
                      ></i>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <span class="dialog">
        <el-button type="primary" size="small" @click="submit">确 定</el-button>
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <div>
      <el-dialog :visible.sync="dialogVisibles" width="30%" :showClose="false">
        <div>
          <el-form :rules="rule" :model="meiju">
            <el-form-item label="枚举值:" prop="enumValue" size="80">
              <el-input
                v-model="meiju.enumValue"
                style="width: 250px; margin-top: 5px; margin-left: 15px"
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="枚举名称:" prop="enumName">
              <el-input
                v-model="meiju.enumName"
                style="width: 250px; margin-top: 5px"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" @click="xinmeiju"
            >确 定</el-button
          >
          <el-button size="small" @click="dialogVisibles = false"
            >取 消</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getpicedianlistapi,
  getyaocexialaapi,
  postpiliangputapi,
  postpixiucedianapi,
  delmeijuapi,
  putmeijuapi
} from '@/api/ElectricalDistribution/IotTechnology/measure'
import {
  putpiliangapi,
  delmeijucedianapi,
  pustmeijucedianapi
} from '@/api/ElectricalDistribution/IotTechnology/device'
import { getguizelistapi } from '@/api/ElectricalDistribution/IotTechnology/eventtype'
// import { } from '@/api/ElectricalDistribution/IotTechnology/device'
export default {
  name: 'MaintenanceYaoce',
  props: {
    changeselect: {
      type: Array
    },
    flag: {
      type: String
    }
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      xlalalist: [],
      xlalalists: [],
      dialogVisibles: false,
      meiju: {},
      rule: {
        enumValue: [{ required: true, message: '枚举值必填', trigger: 'blur' }],
        enumName: [{ required: true, message: '枚举名称必填', trigger: 'blur' }]
      },
      row: {}
    }
  },

  async mounted() {
    const res = await getguizelistapi()
    this.xlalalist = res.data.list
    const ress = await getyaocexialaapi()
    this.xlalalists = ress.data.list
  },

  methods: {
    async getgetpicedianlist() {
      const arr = this.changeselect.map((ele) => ele.id)
      if (this.flag) {
        const res = await postpixiucedianapi(arr)
        this.tableData = res.data.list
      } else {
        const res = await getpicedianlistapi(arr)
        this.tableData = res.data.list
      }
    },
    async submit() {
      if (this.flag) {
        await putpiliangapi(this.tableData)
      } else {
        await postpiliangputapi(this.tableData)
      }

      this.dialogVisible = false
      this.$message.success('修改成功')
      this.$emit('shuxing')
    },
    async putmeiju(row) {
      this.row = row
      this.dialogVisibles = true
    },
    async xinmeiju() {
      if (this.flag) {
        await pustmeijucedianapi({ ...this.meiju, id: this.row.id })
      } else {
        await putmeijuapi({ ...this.meiju, id: this.row.id })
      }
      this.dialogVisibles = false
      this.getgetpicedianlist()
      this.$message.success('添加成功')
      this.meiju = {}
    },
    async delmeiju(row, val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (this.flag) {
            await delmeijucedianapi({ enumValue: val, id: row.id })
          } else {
            await delmeijuapi({ enumValue: val, id: row.id })
          }
          this.getgetpicedianlist()
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getgetpicedianlist()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.icon-plus {
  cursor: pointer;
  margin-left: 5px;
}
.icon-edit {
  cursor: pointer;
  color: skyblue;
  margin: 0 5px;
}
.icon-delete {
  cursor: pointer;
  color: red;
}
</style>
